<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #prise{
            border: 2px solid #f50;
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }
        .honer{
            width: 150px;
            height: 180px;
            margin: 30px auto;
            color: #000;
            box-sizing: border-box;
        }
        .honer:hover{
            border: 1px solid cyan;
           
        }
        #prise img{
            width: 150px;
        }
        #prise img:hover{
            width: 520px;
            /* position: absolute;
            left: 0; */
            position: relative;

        }
    </style>
</head>
<body>
    <ul class="c2">
        <div id="prise">
            <div class="honer">
                <img src="./img/c.jpg" alt="">
                <p>大学里的全部证书</p>
                <p><a href="/honer1.html#all">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c4.jpg" alt="">
                <p>福慧奖学金证书</p>
                <p><a href="/honer1.html#fuhui">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c5.jpg" alt="">
                <p>二等奖学金</p>
                <p><a href="/honer1.html#erdeng">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c6.jpg" alt="">
                <p>三好学生</p>
                <p><a href="/honer1.html#sanhao">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c7.jpg" alt="">
                <p>美德青年</p>
                <p><a href="/honer1.html#meide">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c8.jpg" alt="">
                <p>学生会聘书</p>
                <p><a href="/honer1.html#pinshu">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c9.jpg" alt="">
                <p>优秀学生干部</p>
                <p><a href="/honer1.html#ganbu">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c10.jpg" alt="">
                <p>入党积极分子</p>
                <p><a href="/honer1.html#active">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c11.jpg" alt="">
                <p>优秀部长</p>
                <p><a href="/honer1.html#buzhang">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c12.jpg" alt="">
                <p>优秀青年志愿者</p>
                <p><a href="/honer1.html#qingnian">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c13.jpg" alt="" style="height: 110px;width: 100px;">
                <p>参赛证书</p>
                <p><a href="/honer1.html#test">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c14.jpg" alt="">
                <p>寻花之旅优秀奖</p>
                <p><a href="/honer1.html#xunhua">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c15.jpg" alt="">
                <p>优秀青年志愿者</p>
                <p><a href="/honer1.html#zhiyuan">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c3.jpg" alt="">
                <p>结业证书</p>
                <p><a href="/honer1.html#jieye">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c2.jpg" alt="">
                <p>培训荣誉证书</p>
                <p><a href="/honer1.html#peixun">详情</a></p>
            </div>
            <div class="honer">
                <img src="./img/c1.jpg" alt="">
                <p>荣誉证书</p>
                <p><a href="/honer1.html#rongyu">详情</a></p>
            </div>
            
        </div>
    </ul>
</body>
</html>